<template>
  <div>
    <top></top>
    <div>
      <div class="Back">
        <!-- <a href="main" class="BackLink"
          ><i class="fa-solid fa-circle-left"></i>Return to Main Menu</a
        >
         -->
      </div>

      <div class="Catalog">
        <h2>{{ type }}</h2>

        <div class="CategoryMain">
          <!--productList不为空-->
          <div v-if="productList.length > 0">
            <!--循环productList中的Product项-->
            <div class="Category" v-for="product in productList">
              <div
                class="CategoryImg"
                @click="goRouterPath(`/product/${product.productId}`)"
              >
                <a>
                  <img
                    src="../../assets/images/example.png"
                    class="CategoryImgLink"
                  />
                </a>
              </div>
              <div class="CategoryName">
                <b>
                  <a
                    @click="goRouterPath(`/product/${product.productId}`)"
                    class="CategoryNameLink"
                  >
                    Name:
                    <p>{{ product.name }}</p>
                  </a>
                </b>
              </div>
              <div class="CategoryDescription">
                <!-- <a
                  th:href="@{/productForm(productId=${product.getProductId()})}"
                  class="CategoryDescriptionLink"
                >
                  Description:
                  <p
                    th:text="${product.description.substring(product.description.indexOf('>')+1)}"
                  ></p>
                </a> -->
              </div>
            </div>
          </div>

          <!--productList为空-->
          <h2 v-else>Sorry for that nothing was found here...</h2>
        </div>
      </div>
    </div>

    <!-- {{ productList.length > 0 ? productList[0].productId : null }} -->

    <bottom></bottom>
  </div>
</template>

<script>
import Bottom from "../common/Bottom.vue";
import Top from "../common/Top.vue";
export default {
  components: {
    Bottom,
    Top,
  },
  data() {
    return {
      type: null,
      productList: [],
    };
  },
  methods: {
    initAll() {
      console.log(this.$route.params.type);
      this.type = this.$route.params.type;
      this.getProductsByCategory(this.type);
    },
    getProductsByCategory(categoryId) {
      this.$http
        .get(`/categories/${categoryId}/products`)
        .then((res) => {
          console.log(res);
          this.productList = res.data.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    goRouter(name) {
      this.$router.push({ name: name });
    },
    goRouterPath(path) {
      this.$router.push({ path: path });
    },
  },
  mounted() {
    this.initAll();
  },
  watch: {
    $route(newRoute) {
      console.log(newRoute.params.type);
      this.getProductsByCategory(newRoute.params.type);
    },
  },
};
</script>

<style scoped>
@import url(../../assets/css/mypetstoreNew.css);
</style>
